<template>
  <div class="product_view">
    <text class="product_title">了解所有{{ globalConfig.MAIN_TITLE }}产品</text>
    <div class="r_product_sub_title">
      <text class="product_sub_title">了解最新产品动态</text>
      <el-icon :size="12" class="product_sub_icon"><ArrowRightBold /></el-icon>
    </div>

    <div class="product_menu">
      <!-- 左侧菜单 start -->
      <div class="menu_left">
        <div
          class="menu_left_item"
          v-for="(item, index) in menusLeft"
          :key="index"
        >
          {{ item.label }}
        </div>
      </div>
      <!-- 左侧菜单 end -->
      <!-- 右侧产品列表 start -->
      <div class="menu_right">
        <div
          v-for="(item, index) in menusLeft"
          :key="index"
          style="
            display: flex;
            text-align: start;
            justify-content: flex-start;
            flex-direction: column;
          "
        >
          <!-- 类目标题 start -->
          <text class="menu_item_title"> {{ item.label }}</text>
          <!-- <el-icon :size="14"><ArrowRightBold /></el-icon> -->
          <!-- 类目标题 end -->

          <ProductItem style="margin-top: 20px"></ProductItem>
        </div>
      </div>
      <!-- 右侧产品列表 end -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, onBeforeUnmount, onUnmounted } from 'vue';
import ProductItem from '@/components/ProductItem.vue';
import { globalConfig } from '@/util/globalConfig';

const menusLeft = ref([
  {
    label: '计算',
  },
  {
    label: '人工智能',
  },
  {
    label: '存储',
  },
  {
    label: '网络',
  },
  // {
  //   label: '云终端',
  // },
  // {
  //   label: 'CDN与边缘',
  // },
  // {
  //   label: '容器与中间件',
  // },
  // {
  //   label: '数据库',
  // },
  // {
  //   label: '大数据',
  // },
  // {
  //   label: '视频',
  // },
  {
    label: '安全及管理',
  },
  {
    label: '迁移与管理',
  },
  // {
  //   label: '企业应用',
  // },
  // {
  //   label: '专属云与混合云',
  // },
  {
    label: '创新能力专区',
  },
]);

onMounted(() => {});
</script>

<style scoped lang="scss">
.product_view {
  width: 100vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.product_title {
  font-size: 28px;
  font-weight: bold;
  margin-top: 50px;
}

.r_product_sub_title {
  display: flex;
  align-items: center;
  margin-top: 30px;

  .product_sub_title {
    color: var(--next-bg-main);
    font-size: 15px;
    font-weight: bold;
  }

  .product_sub_icon {
    margin-left: 5px;
    color: var(--next-bg-main);
  }
}

.product_menu {
  max-width: 1280px;
  width: 100vw;
  padding: 0 50px;
  margin-top: 50px;
  display: flex;
}

.menu_left {
  display: flex;
  flex-direction: column;
  text-align: start;
  justify-content: flex-start;
  width: calc(20% - 30px);
  min-width: 200px;
  margin-right: 30px;

  .menu_left_item {
    cursor: pointer;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-size: 14px;
  }

  .menu_left_item:hover {
    background-color: #fff;
  }
}

.menu_right {
  width: 80%;
  min-width: 900px;
  display: flex;
  flex-direction: column;
  text-align: start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;

  .menu_item_title {
    font-size: 18px;
    font-weight: bold;
    margin-right: 3px;
  }
}
</style>
